<!-- 我的平台账号 -->
<template>
  <div id="Email">
    <!-- 头部 -->
    <Head BackType1="1" NoticeType7='1' v-show="hasDisable" title="平台账号"></Head>
    <Head BackType1="1" NoticeType3='1' v-show="!hasDisable" v-on:SuccessClick="SuccessClick" title="平台账号"></Head>
    <div id="EmailBox">
      <div class="EmailTitle">输入您想要绑定的平台账号</div>
      <div class="EmailText">
        <input :readonly="readonly" v-model="InputText" class="EmailInput" placeholder="请输入您想要绑定的平台账号" type="text">
        <img @click="DelEmail()" class="DelText" src="@/assets/img/clearButton.png" alt="">
      </div>

      <div class="EmailTips">
        <span>*</span>
        平台ID将作为添加好友的重要条件，仅可更改一次请谨慎填写。
      </div>
    </div>
  </div>
</template>
<script>
  import Head from "../components/Head"
  import { Dialog } from 'vant';
  export default {
    data(){
      return{
        userePlantId:'',
        InputText:'',
        hasDisable:true,
        readonly:true,
        num:'',
      }
    },
    components:{
      Head,
      [Dialog.name]:Dialog,
    },
    mounted(){
      /**
      * 我的平台id
      */
     this.userePlantId = this.$route.query.name;
     this.InputText = this.$route.query.name;
     this.num = this.$route.query.num;
     if(this.num == 0){
       this.readonly = false;
     }else{
       
     }
    },
    watch:{
      InputText(){
        if(this.InputText == this.userePlantId || this.InputText ==''){
          this.hasDisable = true
        }else{
          this.hasDisable = false
        }
      }
    },
    methods:{
      DelEmail(){
        console.log(this.InputText)
        this.InputText =''
      },
      SuccessClick(){
        if(this.InputText == ''){
          Dialog.alert({
            title: '提示',
            message: '平台账号不能为空'
          }).then(() => {
            // on close
          });
        }else{
          /**
          * 修改平台Id
          */
          var platformId={
              platformId:this.InputText,
          }
          this.$post(urlConfig.setPlatformId,platformId)
            .then(res => {
            console.log(res);
            var hasAmend = true;
            this.$router.push({name:'MyInformation',params:
            {
              hasAmend: hasAmend,
              name:'平台账号'
            }})
          })
        }
      }
    },
  }
</script>

<style scoped lang="less">
  #Email{
    font-size: 24px;
    color: #888888;
    #EmailBox{
      width: 750px;
      position: fixed;
      top: 88px;
      .EmailTitle{
        padding: 18px 30px;
      }
      .EmailText{
        height: 88px;
        padding:0 30px;
        line-height: 88px;
        background: #fff;
        font-size: 30px;
        position: relative;
        .EmailInput{
          color: #333;
          width: 690px;
          height: 88px;
          &::-webkit-input-placeholder {
            font-size:26px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(152,151,148,1);
          }
          &:-ms-input-placeholder {
            font-size:26px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(152,151,148,1);
          }
        }
        img{
          position: absolute;
          right: 30px;
          top: 33px;
          height: 22px;
          width: 22px;
          border-radius: 11px;
        }
      }
      .EmailTips{
        font-size: 24px;
        padding: 0 30px;
        line-height: 50px;
        span{
          color: #E96767;
        }
      }
    }
  }
</style>
